<template>
    <div class="components-container">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>   
            <el-form class="formInline" label-width="90px" slot="form">
                <el-row class="rechargeDetail">充值明细</el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="充值平台："> 
                            <el-select v-model="platform" placeholder="全部平台" style="width:80%" @change="changePlatform">
                                <el-option v-for="item in platformList" :key="item.code" :label="item.name" :value="item.code">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button @click="thisMonth">本月</el-button>
                        <el-button @click="lastMonth">上月</el-button>
                        <el-button @click="checkAll">查看全部</el-button>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="充值日期："> 
                            <el-col :span="11">
                                <el-date-picker v-model="startDate" :editable="false" type="date" placeholder="选择开始日期" :picker-options="pickerOptions1" @change="dateChange1" style="width:100%">
                                </el-date-picker>
                            </el-col>
                            <el-col :span="2" align="center">至</el-col>
                            <el-col :span="11">
                                <el-date-picker v-model="endDate" :editable="false" type="date" placeholder="选择结束日期" :picker-options="pickerOptions2"  @change="dateChange2" style="width:100%">
                                </el-date-picker>
                            </el-col>             
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
            </div>
            <el-table ref="singleTable" :data="dataApply" style="width:100%" border @selection-change="handleSelectionChange" v-loading="loading">

                <el-table-column label="订单号" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sOrderNum || '--'}}</span>
                    </template> 
                </el-table-column>
                                    
                <el-table-column label="时间" align="center" min-width="120">
                    <template scope="scope">
                        <span>{{scope.row.sCreateTime || '--'}}</span>
                    </template> 
                </el-table-column>

                <el-table-column label="一卡通卡号" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sCardNumber || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="持卡人" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sStudentName || scope.row.sTeacherName}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="持卡人e学云ID号" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sCardholderExueCode || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="支付人（用户名）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sParentName || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="支付人e学云ID号" align="center" min-width="100">
                    <template scope="scope">
                        <span>{{scope.row.sPayerExueCode || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="手机号" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sPhone || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="支付金额（元）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sMoney.toFixed(2)}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="支付方式" align="center" prop="sPaymentMethod">
                    <template scope = "scope">
                        {{scope.row.sPaymentMethod === '0'? 'e学云余额': scope.row.sPaymentMethod === '1'? '支付宝': scope.row.sPaymentMethod === '2'? '微信':scope.row.sPaymentMethod === '3'? '其他':'--'}}
                    </template>
                </el-table-column>

                <el-table-column label="充值平台" align="center" prop="sPaymentPlatform">
                    <template scope = "scope">
                        {{scope.row.sPaymentPlatform === '0'? 'e学云平台': scope.row.sPaymentPlatform === '1'? '其他':'--'}}
                    </template>
                </el-table-column>                           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>            
        </TableLayout>
  </div>
</template>
 
<script>
import { pageIncomeSettlementDetail } from 'api/oneCardSolution';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions } from 'vuex';
import { mapGetters } from 'vuex';
import moment from 'moment';
export default{
    components: { TableLayout },
    data() {
        return {
            startDate: '',
            endDate: '',
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            pickerOptions2: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            platform: '-1',
            platformList: [
                {
                    name: '全部平台',
                    code: '-1'
                },
                {
                    name: 'e学云平台',
                    code: '0'
                },
                {
                    name: '其他平台',
                    code: '1'
                }
            ],
            status: '',
            dataApply: [],
            loading: true,
            listQuery: {// 分页
                page: 1,
                total: 0
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'schoolId'
        ])
    },
    created() {
        this.searchFetchData()
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        dateChange1(date) {
            if (this.endDate && this.startDate) {
                this.searchFetchData();
            }
            this.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() - 864e5 || time.getTime() > Date.now();
                }
            }
        },
        dateChange2(date) {
            if (this.endDate && this.startDate) {
                this.searchFetchData();
            }
            this.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime() || time.getTime() > Date.now();
                }
            }
        },
        onSubmit() {
            this.listQuery.page = 1;
            this.searchFetchData();
        },
        changePlatform() {
            // //console.log(this.startDate,this.endDate)
            // this.searchFetchData()
            if (this.endDate && this.startDate || !this.endDate && !this.startDate) {
                
                this.searchFetchData();
            }else{
                this.$message('请选择充值日期');
            }
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {      
            this.listQuery.page = val;
            this.searchFetchData();
        },
        searchFetchData() {
            this.loading = true;
            let startDate = !this.startDate?'':moment(this.startDate).format('YYYY-MM-DD');
            let endDate = !this.endDate?'':moment(this.endDate).format('YYYY-MM-DD');
            let pipelineTypes = null;
            if (this.platform == '-1') {
                pipelineTypes = ['0', '1'];
            } else {
                pipelineTypes = [this.platform];
            }
            pageIncomeSettlementDetail(this.listQuery.page, this.config.pageSize, this.schoolId, startDate, endDate, pipelineTypes).then(response => {
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;
            });
        },
        thisMonth() {
            const day = new Date();
            const daycount = day.getDate();
            const month = day.getMonth() + 1;
            const year = day.getFullYear();
            const startTime = year + '-' + month + '-1';
            const endTime = year + '-' + month + '-' + daycount;
            this.startDate = new Date(startTime);
            this.endDate = new Date(endTime);

        },
        lastMonth() {
            let day = new Date();
            let month = day.getMonth();
            let year = day.getFullYear();
            if (month == 0) {
                month = 12;
                year = year - 1
            }
            let daycount = new Date(year, month, 0).getDate();
            let startTime = year + '-' + month + '-1';
            let endTime = year + '-' + month + '-' + daycount;
            this.startDate = new Date(startTime);
            this.endDate = new Date(endTime);
        },
        checkAll() {
            this.startDate = '';
            this.endDate = '';
            //console.log('checkAll',this.startDate)
            this.searchFetchData();
        },
        goToReviseRole(pId) {
            this.$router.push({
                path: `checkDetails/${pId}`
            });
        }
    }
}
</script>
 
<style scoped>
.components-container{
   width:100%;
   margin:20px 0;
}
.block{
    padding-bottom:10px;
 
}
.el-row{
  background:#fff; 
  line-height:32px;
  border-radius:3px;
  
}
.rechargeDetail{
    padding-bottom:20px;
}
 
</style>